<script setup lang="ts">
import { ref, onMounted, onUnmounted, onBeforeMount, Ref } from 'vue';
import PostModel from './PostModel.vue'
import Post from './Post.vue';
import { getPostList, getOnePost } from '@api'
import { PostDto } from '@/type'
import UserSlide from '@components/UserSlide.vue';

// 当前页码
const currentPage = ref(1)
// 每页数量
const pageSize = ref(10)
// 动态是否加载完成
let isLoaded = ref(false) as Ref<boolean>

// 存放动态的数组
const postList = ref([]) as Ref<PostDto[]>

//模态框是否显示
let open = ref(false)
function switchOpen() {
    open.value = !open.value;
}



//控制评论框的显示
// let isShow = ref(false);
// 显示评论
const switchShow = (index: number) => {
    // isShow.value = !isShow.value;
    postList.value[index].showComment = !postList.value[index].showComment
}

// 函数节流
// const throttle = function (fn: any, wait: number) {
//     let timer: any = null;
//     return function (this: any) {
//         let context: any = this
//         // console.log('节流2');
//         if (timer) 
//             return
//         // if (!timer) {
//             timer = setTimeout(() => {
//                 fn.apply(context, arguments)
//                 timer = null
//             }, wait)
//         // }
//     };
// }

// 函数防抖
const debounce = function (this: any, fn: any, wait: number) {
    let timer: any = null;
    let _this = this
    return function () {
        let context: any = _this
        clearTimeout(timer)
        timer = setTimeout(() => {
            fn.apply(context, arguments)
            timer = null
        }, wait)

    };
}
const reload = () => {
    console.log('刷新')
    currentPage.value = 1
    getPostList(currentPage.value, pageSize.value)
        .then(res => {
            console.log(res)
            postList.value.length = 0
            postList.value.push(...res.data.data.list)

            currentPage.value++

            // 全部数据加载完毕
            if (res.data.data.isLastPage) {
                isLoaded.value = true
            }
        })
}

// 加载动态
const loadPost = () => {
    console.log('加载内容')
    getPostList(currentPage.value, pageSize.value)
        .then(res => {
            console.log(res)
            postList.value.push(...res.data.data.list)

            currentPage.value++

            // 全部数据加载完毕
            if (res.data.data.isLastPage) {
                isLoaded.value = true
            }
        })

}

// 更新单个动态
const updatePost = (id: string) => {
    getOnePost(id).then((res) => {
        for (let i = 0; i < postList.value.length; i++) {
            if (postList.value[i].id === id) {
                postList.value[i] = res.data.data
                break
            }
        }
    })
}

onBeforeMount(() => {
    loadPost()

})

// 滚动监听事件 判断是否滚动到了底部
const scrollHandler = () => {
    // 获取视图顶部的高度
    // 获取滚动高度和内容高度
    const scrollTop = window.document.documentElement.scrollTop
    const scrollHeight = document.documentElement.scrollHeight

    if (scrollTop >= scrollHeight * 0.4 && !isLoaded.value) {
        loadPost()
    }

}
// 将监听函数添加到监听器中
onMounted(() => {
    window.addEventListener('scroll', debounce(scrollHandler, 500))
})
// 移除监听器
onUnmounted(() => {
    window.removeEventListener('scroll', debounce(scrollHandler, 500))
})

</script>

<template>
    <PostModel :reload="reload" :switchOpen="switchOpen" :open="open" />
    <div class="main">
        <div class="left-box">
            <div class="post-box">
                <div class="title">
                    <div class="title-left">动态</div>
                    <!-- 可加入视频 -->
                    <span @click="switchOpen">
                        <svg t="1701504642231" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="3277" width="18px" height="18px">
                            <path
                                d="M128 896h768v-64H128zM256 704v-146.752l224-224L626.752 480l-224 224H256zM608 205.248L754.752 352 672 434.752 525.248 288 608 205.248z m214.624 169.408l0.032-0.032a32 32 0 0 0 0-45.248l-0.032-0.032-191.968-191.968-0.032-0.032a32 32 0 0 0-45.248 0l-0.032 0.032L192 530.752V768h237.248l393.376-393.344z"
                                fill="#181818" p-id="3278"></path>
                        </svg>
                        <div>发动态</div>
                    </span>

                </div>
                <Post :post-list="postList" :switch-show="switchShow" :update-post="updatePost" />
            </div>
        </div>
        <div class="rightBox">
            <UserSlide />
        </div>
    </div>
</template>
<style scoped lang="css">
.main {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.left-box {
    flex: 3;
}

.rightBox {
    flex: 1;
}

.post-box {
    padding: 20px 30px;
}

.title {
    display: flow-root;
    border-bottom: 2px solid var(--red-style);
    padding-bottom: 10px;
}

.title .title-left {
    float: left;
    font-size: 24px;
    color: #333;
}

.title span {
    cursor: pointer;
    float: right;
    display: flex;
    justify-content: center;
    width: 80px;
    height: 20px;
    border: 1px solid #CDCDCD;
    border-radius: 10px;
    font-size: 14px;
    margin: 6px 0px 0px 10px;
}

.title span:hover {
    background-color: #F5F5F7;
}

.title span div {
    display: inline-block;
}
</style>